/**
* 功能描述：日期范围组件
* @author jin xiaohang
* @date 2022/9/20 17:00
*/

@import "src/style/mixins/index";

@include b(base-date-range-picker){

  //基本高度
  $--dateRangePicker-base-height:50%;

  //基本宽度
  $--dateRangePicker-base-width:280px;

  //日期范围悬停背景色
  $--dateRangePicker-inrange-hover-background-color:#1448 ;


  //样式相关
  //background-color: $--color-primary;
  //border-style: $--border-style-base;
  //border-radius: $--border-radius-zero;

  //字体大小
  font-size: $font-size-extra-large;

  //布局相关
  height: $--dateRangePicker-base-height;
  width: $--dateRangePicker-base-width;
  padding: 5px;
  margin: 10px;
  cursor: pointer;

  //范围面板样式
  @include b(base-date-range-picker-panel){
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    height: 50%;
    width: 100%;

    //输入框样式
    @include b(base-date-range-picker-input){
      &:disabled{
        cursor: not-allowed;
        background-color: #909399;
      }
    }

    //范围左侧部分样式
    @include b(base-date-range-left){
      width: 50%;
      float: left;
      font-size: $font-size-extra-small;

      //聚焦激活
      :focus :active{
          background-color: #409EFF;
      }

      //鼠标悬停
        :hover{
            background-color: $--dateRangePicker-inrange-hover-background-color ;
        }
    }

    //范围右侧部分样式
    @include b(base-date-range-right){
      width: 50%;
      float: right;
      font-size: $font-size-extra-small;

      //聚焦激活
      :focus :active{
        background-color: #409EFF;
      }

      //鼠标悬停
      :hover{
        background-color: $--dateRangePicker-inrange-hover-background-color ;
      }
    }

  }



}